<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!-- 务必放在vue.js文件之下 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <!-- 能不能把v-if和v-for写在同一标签中 -->
        <!-- 不行 增加无用资源的消耗，v-for优先级高于v-if -->
        <p v-if="flag">内容正在加载中，请稍后</p>
        <div v-for="i in data">
            <!--v-bind 绑定某个属性值  -->
            <a v-bind:href="i.url"><img v-bind:src="i.image" alt="" srcset=""></a>
            <p>{{i.title}}</p>
        </div>

        <div>
            <!-- v-bind他的简写： -->
            <el-table v-bind:data="tableData" stripe style="width: 100%">
                <el-table-column prop="序号" label="序号">
                </el-table-column>
                <el-table-column prop="姓名" label="姓名">
                </el-table-column>
                <el-table-column prop="宿舍" label="宿舍">
                </el-table-column>
                <el-table-column prop="学号" label="学号">
                </el-table-column>
            </el-table>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                data: [],
                flag: true,
                tableData: []

            },
            methods: {
                getData() {
                    axios.get("./js/health.json").then(res => {
                        console.log(res.data);
                        this.data = res.data;
                        this.flag = false

                    })
                },
                getData1() {
                    axios.get("./json/dsj2231.json").then(res => {
                        console.log(res.data);
                        this.tableData = res.data;


                    })
                }

            },
            created() {
                this.getData();
                this.getData1();

            },
        })
    </script>
</body>

</html>